<template>
  <!-- 父传子defineProps -->
  <el-scrollbar style="height: 100vh;">
    <!-- 菜单组件 -->
    <el-menu active-text-color="#ffd04b" background-color="#304156" text-color="#fff" router
      :default-active="$route.path" :collapse="props.collapse">
      <!-- 二级菜单--首页 -->
      <el-menu-item :index="'/index/' + item.path" v-for="item in list.slice(0, 1)" :key="item.name">
        <el-icon>
          <i :class="item.meta.icon"></i>
        </el-icon>
        <span>{{ $t(item.meta.title) }}</span>
      </el-menu-item>
      <!-- 二级菜单 -->
      <el-sub-menu :index="item.path" v-for="item in list.slice(1)" :key="item.name">
        <template #title>
          <el-icon>
            <i :class="item.meta.icon"></i>
          </el-icon>
          <span>{{ $t(item.meta.title) }}</span>
        </template>
        <!-- 三级菜单 -->
        <el-menu-item :index="'/index/' + item.path + '/' + items.path"
          v-for="items in item.children?.filter(s => s.name != 'creategoods' && s.name != 'editgoods')" :key="items.name">
          <span>{{ $t(items.meta.title) }}</span>
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
  </el-scrollbar>
</template>
<script lang="ts" setup>
import list from '@/router/page'//引入动态路由文件
import { defineProps } from 'vue'//引入父传子方法

const props = defineProps({
  collapse: {
    type: Boolean,
    default: false
  }
})
</script>

<style lang="less" scoped>
.el-menu {
  width: 100%;
  border: 0;

  .el-menu-item data-v-8901ba02 {
    background-color: #304156;

    .el-menu-item--inline {
      background-color: #fff;
    }
  }

  &:not(.el-menu--collapse) {
    width: 200px;
  }
}

</style>


